import React, { Component } from 'react';
import { goodcart_list } from '../../utils/api'
import { NavBar, Toast, Swiper } from 'antd-mobile'
import '../../view/Index/shopCart.scss'
import { goodcart_goods_add, goodcart_goods_sub, goodcart_goods_clear } from '../../utils/api'
class Shopcarts extends Component {
    constructor(props) {
        super(props);
        this.state = {
            head_pic: "",
            goods_list: []
        }
    }
    componentDidMount() {
        var userid = JSON.parse(localStorage.getItem("userInfo")).id
        goodcart_list({ userid }).then((res) => {
            this.setState({
                goods_list: res.data.list
            }, () => {
                console.log(this.state.goods_list)
            })
        })
        var head_pic_url = JSON.parse(localStorage.getItem("userInfo")).avatarUrl;
        this.setState({
            head_pic: head_pic_url
        })

    }
    goodadd(item, index) {
        var userid = JSON.parse(localStorage.getItem("userInfo")).id
        var goodid = item.id
        goodcart_goods_add({ userid, goodid }).then((res) => {
            console.log(res.data)
        })
        this.state.goods_list[index].count++
        this.setState({})
    }
    goodsub(item, index) {
        var userid = JSON.parse(localStorage.getItem("userInfo")).id
        var goodid = item.id
        if (item.count > 0) {
            goodcart_goods_sub({ userid, goodid }).then((res) => {
                console.log(res.data.msg)
            })
            this.state.goods_list[index].count--;
            this.setState({
            })
        } if (item.count === 0) {
            this.state.goods_list.splice(index, 1)
        }
    }
    handleClear() {
        this.setState({
            goods_list: []
        })
        var userid = JSON.parse(localStorage.getItem("userInfo")).id
        goodcart_goods_clear({ userid }).then((res) => {
            console.log(res.data)
        })
    }
    render() {
        return (
            <div className='shopcart'>
                <NavBar>购物车({this.state.goods_list.length})</NavBar>
                <div className='empty' style={{ display: (this.state.goods_list.length == 0) ? "block" : "none" }}>
                    <p>
                        购物车为空，去<span onClick={() => { this.props.history.push("/index/allgoods") }}>逛逛</span>吧~

                    </p>
                    <div className='imgBox iconfont'>&#xe63f;</div>
                </div>
                <div className='top' style={{ display: (!this.state.goods_list.length == 0) ? "flex" : "none" }}>
                    <div className='left'>
                        <img src={this.state.head_pic} alt="" />
                        <span>cdf会员购</span>
                    </div>
                    <div className='right' onClick={() => {
                        this.handleClear()
                    }}>清空</div>
                </div>
                <div className="buy" style={{ display: (!this.state.goods_list.length == 0) ? "flex" : "none" }}>
                    <span>换购</span>
                    <span >已满￥200，享超值换购，已选0/1</span>
                    <span>立即挑选</span>
                </div>

                <div className='all_goods' style={{ display: (this.state.goods_list) ? "block" : "none" }}>
                    {
                        this.state.goods_list.map((item, index) => {
                            return (
                                <div className="goods" key={index}>
                                    <input type="checkbox" />
                                    <img src={item.pic} alt="" />
                                    <div className="info">
                                        <div className='title'>{item.name}</div>
                                        <div className='change'>{
                                            item.activityTags.map((item, index) => {
                                                return (
                                                    <span key={index}>{item}</span>
                                                )
                                            })
                                        }</div>
                                        <div className='sub'>满200/800,享受超值换购</div>
                                        <div className="tips">三天后恢复原价</div>
                                        <div className="price_num">
                                            <div className='price'>￥<span>{parseInt(item.salesPrice.value)}</span></div>
                                            <div className='num'><button onClick={() => {
                                                this.goodsub(item, index)
                                            }}>-</button><span>{item.count}</span><button onClick={() => {
                                                this.goodadd(item, index)
                                            }}>+</button></div>
                                        </div>
                                    </div>
                                </div>

                            )
                        })
                    }

                </div>
                <div className='summary' style={{ display: (!this.state.goods_list.length == 0) ? "flex" : "none" }}>
                    <div className="left">
                        <input type="radio" />
                        <span>全选</span>
                    </div>
                    <div className="right">
                        <span className='all'>总价：<span className='symbol'>￥</span><span className='price'>{425}</span></span>
                        <div>去结算({this.state.goods_list.length})</div>
                    </div>
                </div>

            </div>
        );
    }
}

export default Shopcarts;